<template>
    <div id='wrap'>
        <h1>防抖函数lodash</h1>
        <input :disabled="isDisabled" v-model="Wenti" type="text" placeholder="请输入问题..." />
        <p>问题的结果：{{ DaAn }}</p>
    </div>
</template>
<script lang='ts'>
export default {
    name: 'lodash',
}
</script>
<script lang='ts' setup>
import { watch, ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy } from 'vue';
import { debounce } from 'lodash'
interface ResData {
    data: string,
    msg: string,
    code: number | string
}
function fetechDataDemo() {
    return new Promise<ResData>((resolve, reject) => {
        setTimeout(() => {
            resolve({
                data: 'gellow',
                msg: 'success',
                code: 200
            })
        }, 2000);
    })
}

const Wenti = ref('');
const DaAn = ref('');
const isDisabled = ref(false);

watch(Wenti, debounce(async (newValue: string, oldValue: string) => {
    console.log(newValue, 'newValue')
    console.log(oldValue, 'oldValue')
    isDisabled.value = true;
    const { data } = await fetechDataDemo();
    DaAn.value = data;
    isDisabled.value = false;
}, 1000))
</script>
<style lang='scss'>
@use '@/assets/common.scss';
</style>